<!-- src/pagesOrder/list/list.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import OrderList from '@/pagesOrder/pages/list/components/OrderList.vue'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '全部' },
  { orderState: 1, title: '待付款' },
  { orderState: 2, title: '待发货' },
  { orderState: 3, title: '待收货' },
  { orderState: 4, title: '待评价' },
])
// 获取路由参数，type 是当前激活的 tab 项索引，并且路由参数都是 string！！！
const query = defineProps<{
  type: string
}>()
const activeIndex = ref(+query.type)
const onChange = (e: UniHelper.SwiperOnChangeEvent) => {
  activeIndex.value = e.detail.current
}
const memberStore = useMemberStore()
onLoad(() => {
  // 如果没有登录，那手动跳转登录页，减少请求
  if (!memberStore.profile) {
    // 获取当前页面路由
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1] as any

    // 获取当前页面路径，并且进行编码，因为路径中可能带有 ?id=123 这种参数，所以需要进行编码
    // fullPath 只有在 onLoad 钩子之后才可以拿到，因为 fullPath 相当于携带路由参数的 URL
    const currentPath = currentPage.$page.fullPath
      ? '?toUrl=' + encodeURIComponent(currentPage.$page.fullPath)
      : ''
    uni.redirectTo({
      url: '/pages/login/login' + currentPath,
    })
  }
})
const { safeAreaInsets } = uni.getWindowInfo()
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
        >{{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" @change="onChange" :current="activeIndex" v-if="memberStore.profile">
      <!-- 滑动项 -->
      <swiper-item v-for="item in orderTabs" :key="item.title">
        <OrderList :activeStatus="item.orderState"></OrderList>
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}
</style>
